<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售机会跟踪 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/opportunity-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">销售管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">销售机会</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">6</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">销售管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="opportunity-management.html" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="opportunity-form.html" class="menu-link">
                            <i class="fas fa-plus-circle"></i>
                            <span>新增机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-funnel-dollar"></i>
                            <span>销售漏斗</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-bar"></i>
                            <span>销售分析</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">其他模块</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="customer-list.html" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="product-management.html" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>产品管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="invitation-management.html" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">销售机会跟踪</h1>
                <p class="page-subtitle">管理从客户意向到成交转化的完整销售流程</p>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" id="import-btn">
                    <i class="fas fa-upload"></i>
                    导入机会
                </button>
                <button class="btn btn-primary" id="add-opportunity-btn">
                    <i class="fas fa-plus"></i>
                    新增机会
                </button>
            </div>
        </header>

        <!-- 销售漏斗概览 -->
        <section class="funnel-overview">
            <div class="funnel-header">
                <h2>销售漏斗概览</h2>
                <div class="funnel-controls">
                    <select id="funnel-period" class="form-select">
                        <option value="this_month">本月</option>
                        <option value="last_month">上月</option>
                        <option value="this_quarter">本季度</option>
                        <option value="this_year">本年度</option>
                    </select>
                </div>
            </div>
            <div class="funnel-stages">
                <div class="stage-card stage-1">
                    <div class="stage-header">
                        <div class="stage-number">1-5</div>
                        <div class="stage-title">前期阶段</div>
                    </div>
                    <div class="stage-stats">
                        <div class="stage-count">186</div>
                        <div class="stage-amount">¥2,340,000</div>
                    </div>
                    <div class="stage-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 85%"></div>
                        </div>
                        <span class="progress-text">85%</span>
                    </div>
                </div>

                <div class="stage-card stage-2">
                    <div class="stage-header">
                        <div class="stage-number">6-7</div>
                        <div class="stage-title">成交阶段</div>
                    </div>
                    <div class="stage-stats">
                        <div class="stage-count">68</div>
                        <div class="stage-amount">¥1,280,000</div>
                    </div>
                    <div class="stage-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 65%"></div>
                        </div>
                        <span class="progress-text">65%</span>
                    </div>
                </div>

                <div class="stage-card stage-3">
                    <div class="stage-header">
                        <div class="stage-number">8-10</div>
                        <div class="stage-title">执行阶段</div>
                    </div>
                    <div class="stage-stats">
                        <div class="stage-count">42</div>
                        <div class="stage-amount">¥890,000</div>
                    </div>
                    <div class="stage-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 45%"></div>
                        </div>
                        <span class="progress-text">45%</span>
                    </div>
                </div>

                <div class="stage-card stage-4">
                    <div class="stage-header">
                        <div class="stage-number">11-12</div>
                        <div class="stage-title">售后阶段</div>
                    </div>
                    <div class="stage-stats">
                        <div class="stage-count">24</div>
                        <div class="stage-amount">¥520,000</div>
                    </div>
                    <div class="stage-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 25%"></div>
                        </div>
                        <span class="progress-text">25%</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 搜索和筛选区域 -->
        <section class="search-filter-section">
            <div class="search-filter-container">
                <!-- 搜索框 -->
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" placeholder="搜索机会名称、客户姓名或机会编号" class="search-input" id="search-input">
                    <button class="search-clear" id="search-clear">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <!-- 筛选器 -->
                <div class="filter-controls">
                    <div class="filter-group">
                        <label class="filter-label">机会等级</label>
                        <select class="filter-select" id="level-filter">
                            <option value="">全部等级</option>
                            <option value="A">A级 (热门)</option>
                            <option value="B">B级 (温热)</option>
                            <option value="C">C级 (一般)</option>
                            <option value="D">D级 (冷门)</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">销售阶段</label>
                        <select class="filter-select" id="stage-filter">
                            <option value="">全部阶段</option>
                            <option value="1">初步接触</option>
                            <option value="2">需求分析</option>
                            <option value="3">方案推荐</option>
                            <option value="4">方案优化</option>
                            <option value="5">决策促成</option>
                            <option value="6">合同签署</option>
                            <option value="7">款项收取</option>
                            <option value="8">出行准备</option>
                            <option value="9">出团执行</option>
                            <option value="10">回程确认</option>
                            <option value="11">售后回访</option>
                            <option value="12">复购培育</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">负责顾问</label>
                        <select class="filter-select" id="consultant-filter">
                            <option value="">全部顾问</option>
                            <option value="1">张顾问</option>
                            <option value="2">李顾问</option>
                            <option value="3">王顾问</option>
                            <option value="4">陈顾问</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">创建时间</label>
                        <select class="filter-select" id="time-filter">
                            <option value="">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                        </select>
                    </div>

                    <button class="btn btn-outline" id="reset-filters">
                        <i class="fas fa-undo"></i>
                        重置
                    </button>
                </div>
            </div>
        </section>

        <!-- 统计卡片 -->
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon stat-primary">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">320</div>
                        <div class="stat-label">总机会数</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +18%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-success">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">89</div>
                        <div class="stat-label">本月成交</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +12%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-warning">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">156</div>
                        <div class="stat-label">进行中</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +8%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-info">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">32.5%</div>
                        <div class="stat-label">转化率</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +5.2%
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 机会列表 -->
        <section class="table-section">
            <div class="table-header">
                <div class="table-title">
                    <h2>销售机会列表</h2>
                    <span class="result-count">共 320 条记录</span>
                </div>
                <div class="table-actions">
                    <button class="btn btn-outline" id="export-btn">
                        <i class="fas fa-download"></i>
                        导出
                    </button>
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="table">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="view-btn" data-view="kanban">
                            <i class="fas fa-columns"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 表格视图 -->
            <div class="table-container" id="table-view">
                <table class="opportunity-table">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="opportunity_number">
                                机会编号
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="sortable" data-sort="opportunity_name">
                                机会名称
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>客户信息</th>
                            <th>机会等级</th>
                            <th>销售阶段</th>
                            <th class="sortable" data-sort="expected_amount">
                                预计金额
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="sortable" data-sort="expected_close_date">
                                预计成交
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>负责顾问</th>
                            <th class="sortable" data-sort="created_at">
                                创建时间
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="actions-column">操作</th>
                        </tr>
                    </thead>
                    <tbody id="opportunity-table-body">
                        <!-- 销售机会数据行 -->
                        <tr class="opportunity-row" data-opportunity-id="1">
                            <td class="opportunity-number">OPP20250121001</td>
                            <td class="opportunity-name">
                                <div class="opportunity-info">
                                    <div class="name">李女士夫妇-云南深度7日游</div>
                                    <div class="customer-link">
                                        <a href="customer-detail.html?id=101" class="link-text">
                                            <i class="fas fa-external-link-alt"></i>
                                            查看客户
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td class="customer-info">
                                <div class="customer-details">
                                    <div class="customer-name">李大妈</div>
                                    <div class="customer-phone">139****8002</div>
                                </div>
                            </td>
                            <td>
                                <span class="level-badge level-a">A级</span>
                            </td>
                            <td>
                                <div class="stage-info">
                                    <span class="stage-badge stage-5">决策促成</span>
                                    <div class="stage-progress-mini">
                                        <div class="progress-line" style="width: 83%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="amount">¥15,800</td>
                            <td class="date">2025-01-25</td>
                            <td class="consultant">张顾问</td>
                            <td class="date">2025-01-18</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewOpportunity(1)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editOpportunity(1)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="推进阶段" onclick="advanceStage(1)">
                                        <i class="fas fa-step-forward"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(1)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="opportunity-row" data-opportunity-id="2">
                            <td class="opportunity-number">OPP20250120002</td>
                            <td class="opportunity-name">
                                <div class="opportunity-info">
                                    <div class="name">王先生家庭-海南度假5日游</div>
                                    <div class="customer-link">
                                        <a href="customer-detail.html?id=102" class="link-text">
                                            <i class="fas fa-external-link-alt"></i>
                                            查看客户
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td class="customer-info">
                                <div class="customer-details">
                                    <div class="customer-name">王先生</div>
                                    <div class="customer-phone">137****8003</div>
                                </div>
                            </td>
                            <td>
                                <span class="level-badge level-b">B级</span>
                            </td>
                            <td>
                                <div class="stage-info">
                                    <span class="stage-badge stage-3">方案推荐</span>
                                    <div class="stage-progress-mini">
                                        <div class="progress-line" style="width: 50%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="amount">¥12,600</td>
                            <td class="date">2025-01-28</td>
                            <td class="consultant">李顾问</td>
                            <td class="date">2025-01-19</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewOpportunity(2)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editOpportunity(2)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="推进阶段" onclick="advanceStage(2)">
                                        <i class="fas fa-step-forward"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(2)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="opportunity-row" data-opportunity-id="3">
                            <td class="opportunity-number">OPP20250119003</td>
                            <td class="opportunity-name">
                                <div class="opportunity-info">
                                    <div class="name">陈阿姨-桂林山水3日游</div>
                                    <div class="customer-link">
                                        <a href="customer-detail.html?id=103" class="link-text">
                                            <i class="fas fa-external-link-alt"></i>
                                            查看客户
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td class="customer-info">
                                <div class="customer-details">
                                    <div class="customer-name">陈阿姨</div>
                                    <div class="customer-phone">138****8004</div>
                                </div>
                            </td>
                            <td>
                                <span class="level-badge level-c">C级</span>
                            </td>
                            <td>
                                <div class="stage-info">
                                    <span class="stage-badge stage-2">需求分析</span>
                                    <div class="stage-progress-mini">
                                        <div class="progress-line" style="width: 33%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="amount">¥3,200</td>
                            <td class="date">2025-02-05</td>
                            <td class="consultant">王顾问</td>
                            <td class="date">2025-01-17</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewOpportunity(3)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editOpportunity(3)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="推进阶段" onclick="advanceStage(3)">
                                        <i class="fas fa-step-forward"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(3)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 看板视图 -->
            <div class="kanban-container" id="kanban-view" style="display: none;">
                <div class="kanban-board">
                    <div class="kanban-column">
                        <div class="column-header">
                            <h3>初步接触</h3>
                            <span class="count">12</span>
                        </div>
                        <div class="kanban-cards">
                            <div class="kanban-card" data-opportunity-id="1">
                                <div class="card-header">
                                    <span class="level-badge level-a">A级</span>
                                    <span class="amount">¥15,800</span>
                                </div>
                                <div class="card-title">李女士夫妇-云南深度7日游</div>
                                <div class="card-customer">李大妈 · 139****8002</div>
                                <div class="card-footer">
                                    <span class="consultant">张顾问</span>
                                    <span class="date">01-18</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="kanban-column">
                        <div class="column-header">
                            <h3>需求分析</h3>
                            <span class="count">18</span>
                        </div>
                        <div class="kanban-cards">
                            <div class="kanban-card" data-opportunity-id="2">
                                <div class="card-header">
                                    <span class="level-badge level-b">B级</span>
                                    <span class="amount">¥12,600</span>
                                </div>
                                <div class="card-title">王先生家庭-海南度假5日游</div>
                                <div class="card-customer">王先生 · 137****8003</div>
                                <div class="card-footer">
                                    <span class="consultant">李顾问</span>
                                    <span class="date">01-19</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="kanban-column">
                        <div class="column-header">
                            <h3>方案推荐</h3>
                            <span class="count">25</span>
                        </div>
                        <div class="kanban-cards">
                            <!-- 可以拖拽的卡片 -->
                        </div>
                    </div>

                    <div class="kanban-column">
                        <div class="column-header">
                            <h3>方案优化</h3>
                            <span class="count">15</span>
                        </div>
                        <div class="kanban-cards">
                            <!-- 可以拖拽的卡片 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示第 1-20 条，共 320 条记录
                </div>
                <div class="pagination">
                    <button class="page-btn" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <span class="page-dots">...</span>
                    <button class="page-btn">16</button>
                    <button class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-size-selector">
                    <label>每页显示</label>
                    <select id="page-size">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <label>条</label>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：操作菜单 -->
    <div class="modal-overlay" id="action-menu-modal">
        <div class="action-menu">
            <button class="action-menu-item" onclick="addFollowup()">
                <i class="fas fa-plus"></i>
                <span>添加跟进</span>
            </button>
            <button class="action-menu-item" onclick="scheduleCallback()">
                <i class="fas fa-phone"></i>
                <span>安排回访</span>
            </button>
            <button class="action-menu-item" onclick="sendProposal()">
                <i class="fas fa-file-alt"></i>
                <span>发送方案</span>
            </button>
            <button class="action-menu-item" onclick="viewHistory()">
                <i class="fas fa-history"></i>
                <span>查看历史</span>
            </button>
            <button class="action-menu-item" onclick="transferOpportunity()">
                <i class="fas fa-exchange-alt"></i>
                <span>转移机会</span>
            </button>
            <button class="action-menu-item danger" onclick="deleteOpportunity()">
                <i class="fas fa-trash"></i>
                <span>删除机会</span>
            </button>
            <button class="action-menu-item cancel" onclick="closeActionMenu()">
                <i class="fas fa-times"></i>
                <span>取消</span>
            </button>
        </div>
    </div>

    <!-- 模态框：阶段推进 -->
    <div class="modal-overlay" id="advance-stage-modal">
        <div class="modal advance-modal">
            <div class="modal-header">
                <h3 class="modal-title">推进销售阶段</h3>
                <button type="button" class="modal-close" onclick="closeAdvanceModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="stage-progress-visual">
                    <div class="current-stage">
                        <div class="stage-circle current">3</div>
                        <div class="stage-name">方案推荐</div>
                    </div>
                    <div class="stage-arrow">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                    <div class="next-stage">
                        <div class="stage-circle next">4</div>
                        <div class="stage-name">方案优化</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">推进原因</label>
                    <textarea class="form-textarea" placeholder="请说明推进到下一阶段的原因和依据..." rows="3"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label">下阶段计划</label>
                    <textarea class="form-textarea" placeholder="请描述下一阶段的具体计划和目标..." rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeAdvanceModal()">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmAdvanceStage()">确认推进</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/opportunity-management.js"></script>
</body>
</html>